<template>
    <!-- components/stayCalendar/index.wxml -->
    <view>
        <van-calendar
            color="#FE7D02"
            :show="show"
            :default-date="defaultDate"
            :min-date="minDate"
            :max-date="maxDate"
            @close="onCloseCalendar"
            @confirm="onCalendarConfirm"
            :show-mark="false"
            type="range"
            :formatter="formatter"
        />
    </view>
</template>

<script>
// components/stayCalendar/index.js
export default {
    data() {
        return {};
    },
    mixins: [require('miniprogram-computed').behavior],
    props: {
        startTime: {
            type: Number,
            default: 0
        },
        endTime: {
            type: Number,
            default: 0
        },
        show: {
            type: Boolean,
            default: false
        },
        /**
         * 价格列表
         */
        priceList: {
            type: Array,
            default: () => []
        }
    },
    computed: {
        defaultDate(data) {
            return [data.startTime, data.endTime];
        },
        minDate(data) {
            if (data.priceList && data.priceList.length > 0) {
                return data.priceList[0].time || 0;
            } else {
                return new Date().getTime();
            }
        },
        maxDate(data) {
            if (data.priceList && data.priceList.length > 0) {
                return data.priceList[data.priceList.length - 1].time || 0;
            } else {
                // 没有价格最多可选当前最多62天后
                return new Date().getTime() + 86400 * 1000 * 62;
            }
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    methods: {
        attached() {
            let that = this;
            this.setData({
                formatter(day) {
                    let flag = false;
                    // 一天开始的时间
                    let dayTime = day.date.getTime();
                    // console.log(dayTime);
                    for (let i = 0; i < that.priceList.length; i++) {
                        const item = that.priceList[i];
                        // 含有价格的时间
                        const t = item.time;
                        let offset = t - dayTime;
                        // 一天的时差
                        if (offset >= 0 && offset < 86400 * 1000) {
                            flag = true;
                            if (item.opening) {
                                day.bottomInfo = `￥${item.price / 100}`;
                            } else {
                                day.bottomInfo = `未开放`;
                            }
                        }
                    }
                    // 不显示开始和结束
                    day.bottomInfo = day.bottomInfo == '开始' || day.bottomInfo == '结束' ? '' : day.bottomInfo;
                    return day;
                }
            });
        },

        /**
         * 关闭日历对话框
         */
        onCloseCalendar() {
            this.setData({
                show: false
            });
        },

        /**
         * 日期范围选择
         * @param {Object} event
         */
        onCalendarConfirm(event) {
            let startTime = event.detail[0];
            let endTime = event.detail[1];
            this.setData({
                startTime: startTime,
                endTime: endTime,
                show: false
            });
        }
    },
    created: function () {}
};
</script>
<style>
@import './index.css';
</style>
